<script setup lang='ts'>
type RecommendCard = {
    img: string,
    title: string,
    tag: {
        text: string,
        type: number
    },
    state: number,
    playsNum: number,
    barrage: number,
    time: string,
    date: string,
    author: string
}
const props = defineProps<{
    videoInfo: RecommendCard
}>()

const numfilter = (num: number) => {
    if (num < 10000) return num
    else if (num > 10000 && num < 100000000) {
        return (parseFloat(num.toString()) / 10000).toFixed(1) + '万'
    } else {
        return (parseFloat(num.toString()) / 100000000).toFixed(1) + '亿'
    }
}
</script>
<template>
    <div class="video-card">
        <div class="video-card-img">
            <div class="img-wrap">
                <picture class="cover">
                    <img :src="props.videoInfo.img" alt="">
                </picture>
            </div>
            <div class="mask">
                <div class="stats-box">
                    <div class="left-box">
                        <div class="plays-num">
                            <span>{{ numfilter(props.videoInfo.playsNum) }}</span>
                        </div>
                        <div class="barrage">
                            <span>{{ numfilter(props.videoInfo.barrage) }}</span>
                        </div>
                    </div>
                    <div class="right-box">
                        <div class="time">{{ props.videoInfo.time }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="video-card-text">
            <div class="title">{{ props.videoInfo.title }}</div>
            <div class="from">
                <div class="tag" v-if="props.videoInfo.tag.type > 0">{{ props.videoInfo.tag.text }}</div>
                <div class="author">{{ props.videoInfo.author }}</div>
                <span style="padding:0 2px">·</span>
                <div class="date">{{ props.videoInfo.date }}</div>
            </div>
        </div>
    </div>
</template>
<style lang='less' scoped>
.video-card {
    .video-card-img {
        position: relative;
        padding-top: 56.25%;
        background-color: green;
        overflow: hidden;

        .img-wrap {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            .cover {
                width: 100%;
                height: 100%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .mask {
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: #000;
            -webkit-mask-image: linear-gradient(0, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 25%);

            .stats-box {
                position: absolute;
                z-index: 3;
                bottom: 0;
                display: flex;
                width: 100%;
                padding: 16px 8px 9px;
                box-sizing: border-box;
                justify-content: space-between;
                color: #fff;
                font-size: 14px;

                .left-box {
                    display: flex;
                    align-items: center;

                    .plays-num {
                        margin-right: 10px;
                    }
                }

                .right-box {}
            }

        }
    }

    .video-card-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 10px;
        height: 64px;
        background-color: yellow;

        .title {
            display: -webkit-box;
            font-size: 15px;
            overflow: hidden;
            word-wrap: break-word;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .from {
            display: flex;
            align-items: center;
            font-size: 13px;

            .tag {
                margin-right: 5px;
                background-color: #fff0e3;
                color: #ff7f24;
            }

            .author,
            .date {
                color: #9499a0;
            }
        }

    }
}
</style>